<template>
  <div>
    <h2>子组件</h2>
    <ul>
      <li>父传子的数据：{{ count }}</li>
      <li>{{ obj }}</li>
    </ul>
    <button @click="childChange">子传父：修改父组件数据</button>
  </div>
</template>

<script>
export default {
  // vue2和vue3都这么写
  props: {
    count: {
      type: Number,
      default: 1
    },
    obj: {
      type: Object,
      default: () => ({})
    }
  },
  setup (props, { emit }) {
    // console.log('上下文：', context)
    // 没有this
    console.log('vue3获取父传子数据：', props, props.count, props.obj)
    // props.count = 100 // 不能修改
    // props.obj.a = 200 // 可以改（不建议=》单向数据流）
    // props.obj = {} // 不能改（改地址了）
    const childChange = () => {
      // context.emit('change-count', 1000)
      emit('change-count', 1000)
    }
    return { childChange }
  },
  created () {
    console.log(
      'vue2获取父传子数据：', this.count, this.$emit, this.$on
    )
  }
}
</script>

<style lang="scss" scoped>
</style>
